<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .eye {
      width: 64px;
      height: 32px;
      fill: hotpink;
    }
  </style>
</head>

<body>
  <!-- <img src="./eye.svg" alt=""> -->
  <!-- 
    svg - 矢量图
          放大缩小不会失真
   
          属性:  4个
          width      设置宽度
          height     设置高度
          fill       设置颜色
          viewbox    加了该属性之后, 宽度才会有效果, 图标才会等比例缩放 
          viewbox="0 0 svg的宽度 svg的高度"
                     前两个参数 x, y的偏移量
                     后两个参数 svg原图的宽高  128 64     

   -->
  <svg  class="eye" width="128" height="64" viewbox="0 0 128 64" fill="teal"   xmlns="http://www.w3.org/2000/svg">
    <path
      d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z" />
  </svg>
</body>

</html>